<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div ng-class="{'gv-sub-content': $ctrl.target === 'ORGANIZATION' }">
  <div class="gv-forms gv-forms-fluid" layout="column">
    <h1>Authentication</h1>
    <div class="gv-form">
      <h2></h2>
      <div class="gv-form-content" layout="column" ng-if="$ctrl.target === 'ENVIRONMENT'">
        <h3>Configuration</h3>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            aria-label="Force login"
            ng-change="$ctrl.saveForceLogin()"
            ng-model="$ctrl.settings.authentication.forceLogin.enabled"
            ng-disabled="$ctrl.isReadonlySetting('portal.authentication.forceLogin.enabled')"
          >
            Force authentication to access portal
            <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.authentication.forceLogin.enabled')"
              >{{$ctrl.providedConfigurationMessage}}</md-tooltip
            >
          </md-checkbox>
        </md-input-container>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            aria-label="Show login form"
            ng-change="$ctrl.saveShowLoginForm()"
            ng-model="$ctrl.settings.authentication.localLogin.enabled"
            ng-disabled="$ctrl.isReadonlySetting('portal.authentication.localLogin.enabled') || !$ctrl.hasActivatedIdp()"
          >
            Show login form on portal
            <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.authentication.localLogin.enabled')"
              >{{$ctrl.providedConfigurationMessage}}</md-tooltip
            >
          </md-checkbox>
        </md-input-container>

        <md-table-container ng-if="$ctrl.hasEnabledIdp">
          <table class="gv-table-dense" md-table>
            <thead md-head>
              <tr md-row>
                <th md-column nowrap width="1%"></th>
                <th md-column>ID</th>
                <th md-column>Name</th>
                <th md-column>Description</th>
                <th md-column>Activated</th>
              </tr>
            </thead>
            <tbody md-body>
              <tr md-row ng-repeat="identityProvider in $ctrl.identityProviders | orderBy: name" ng-if="identityProvider.enabled">
                <td md-cell ng-switch="identityProvider.type">
                  <md-icon md-svg-icon="assets/logo_{{identityProvider.type | lowercase}}-idp.svg" style="fill: black"></md-icon>
                </td>
                <td md-cell>{{identityProvider.id}}</td>
                <td md-cell>{{identityProvider.name}}</td>
                <td md-cell>{{identityProvider.description}}</td>
                <td md-cell>
                  <ng-md-icon
                    icon="done"
                    ng-if="$ctrl.activatedIdps[identityProvider.id]"
                    permission
                    permission-except="'environment-identity_provider_activation-u'"
                  ></ng-md-icon>
                  <md-input-container
                    class="gv-input-container-dense"
                    permission
                    permission-only="'environment-identity_provider_activation-u'"
                  >
                    <md-checkbox
                      aria-label="Activated for portal"
                      ng-disabled="!identityProvider.enabled"
                      ng-change="$ctrl.toggleActivatedIdp(identityProvider.id)"
                      ng-model="$ctrl.activatedIdps[identityProvider.id]"
                    >
                    </md-checkbox>
                  </md-input-container>
                </td>
              </tr>
            </tbody>
          </table>
        </md-table-container>

        <gravitee-empty-state
          create-mode="true"
          icon="perm_identity"
          message="Identity providers will appear here"
          model="Identity Provider"
          ng-if="!$ctrl.hasEnabledIdp"
          sub-message="Create or enable identity providers in the organization settings"
        ></gravitee-empty-state>
      </div>

      <div class="gv-form-content" layout="column" ng-if="$ctrl.target === 'ORGANIZATION'">
        <h3>Configuration</h3>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            aria-label="Show login form"
            ng-change="$ctrl.saveShowLoginForm()"
            ng-model="$ctrl.settings.authentication.localLogin.enabled"
            ng-disabled="$ctrl.isReadonlySetting('console.authentication.localLogin.enabled') || !$ctrl.hasActivatedIdp()"
          >
            Show login form on management console
            <md-tooltip ng-if="$ctrl.isReadonlySetting('console.authentication.localLogin.enabled')"
              >{{$ctrl.providedConfigurationMessage}}</md-tooltip
            >
          </md-checkbox>
        </md-input-container>

        <md-table-container ng-if="$ctrl.identityProviders.length > 0">
          <table class="gv-table-dense" md-table>
            <thead md-head>
              <tr md-row>
                <th md-column nowrap width="1%"></th>
                <th md-column>ID</th>
                <th md-column>Name</th>
                <th md-column>Description</th>
                <th md-column>Available for portal</th>
                <th md-column>Activated</th>
                <th md-column>Sync</th>
                <th md-column>Last updated at</th>
                <th md-column nowrap width="48px"></th>
              </tr>
            </thead>
            <tbody md-body>
              <tr md-row ng-repeat="identityProvider in $ctrl.identityProviders | orderBy: name">
                <td md-cell ng-switch="identityProvider.type">
                  <md-icon md-svg-icon="assets/logo_{{identityProvider.type | lowercase}}-idp.svg" style="fill: black"></md-icon>
                </td>
                <td md-cell>
                  <a ui-sref="organization.settings.identityproviders.identityprovider({id: identityProvider.id})"
                    >{{identityProvider.id}}</a
                  >
                </td>
                <td md-cell>{{identityProvider.name}}</td>
                <td md-cell>{{identityProvider.description}}</td>
                <td md-cell>
                  <ng-md-icon icon="done" ng-if="identityProvider.enabled"></ng-md-icon>
                </td>
                <td md-cell style="text-align: center">
                  <ng-md-icon
                    icon="done"
                    ng-if="$ctrl.activatedIdps[identityProvider.id]"
                    permission
                    permission-except="'organization-identity_provider_activation-u'"
                  ></ng-md-icon>
                  <md-input-container
                    class="gv-input-container-dense"
                    permission
                    permission-only="'organization-identity_provider_activation-u'"
                  >
                    <md-checkbox
                      aria-label="Activated for console"
                      ng-change="$ctrl.toggleActivatedIdp(identityProvider.id)"
                      ng-model="$ctrl.activatedIdps[identityProvider.id]"
                    >
                    </md-checkbox>
                  </md-input-container>
                </td>
                <td md-cell>
                  <ng-md-icon icon="done" ng-if="identityProvider.sync"></ng-md-icon>
                </td>
                <td md-cell>{{identityProvider.updated_at | date:'MMM d, y h:mm:ss a'}}</td>
                <td md-cell nowrap width="40">
                  <ng-md-icon
                    icon="delete"
                    ng-click="$ctrl.delete(identityProvider)"
                    permission
                    permission-only="'organization-identity_provider-d'"
                  >
                    <md-tooltip md-direction="top" md-visible="false">Delete</md-tooltip>
                  </ng-md-icon>
                </td>
              </tr>
            </tbody>
          </table>
        </md-table-container>

        <gravitee-empty-state
          create-mode="true"
          icon="perm_identity"
          message="Identity providers will appear here"
          model="Identity Provider"
          ng-if="$ctrl.identityProviders.length === 0"
          sub-message="Start creating an identity provider"
        ></gravitee-empty-state>
      </div>
    </div>
  </div>

  <md-fab-speed-dial
    class="md-scale"
    ng-if="$ctrl.target === 'ORGANIZATION'"
    md-direction="{{$ctrl.identityProviders.length > 0 ? 'left' : 'down'}}"
    md-open="false"
    ng-class="{'md-fab-bottom-right md-fab-scrollable' : $ctrl.identityProviders.length > 0, 'gv-help-displayed': $ctrl.$rootScope.helpDisplayed}"
    permission
    permission-only="'organization-identity_provider-c'"
  >
    <md-fab-trigger>
      <md-button aria-label="menu" class="md-fab md-success">
        <md-tooltip md-direction="top" md-visible="false" ng-if="$ctrl.identityProviders.length > 0">New identity provider</md-tooltip>
        <ng-md-icon icon="add"></ng-md-icon>
      </md-button>
    </md-fab-trigger>

    <md-fab-actions>
      <md-button class="md-fab md-raised md-mini" ng-click="$ctrl.create(provider.type)" ng-repeat="provider in $ctrl.availableProviders">
        <md-tooltip md-direction="{{$ctrl.availableProviders.length > 0 ? 'top' : 'right'}}">{{provider.name}}</md-tooltip>
        <md-icon md-svg-icon="assets/logo_{{provider.type | lowercase}}-idp.svg" style="fill: black"></md-icon>
      </md-button>
    </md-fab-actions>
  </md-fab-speed-dial>
</div>
